<template>
    <BasePage>
        <el-form slot="form" :inline="true" size="medium" @submit.native.prevent>
            <el-row>
                <el-form-item label="路况标准">
                    <el-select v-model.trim="form.id" placeholder="请选择" @change="handleChange">
                        <el-option v-for="(item, index) in roadConditionsOptions" :key="index" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <BaseButton v-permission="{ btnCode: 'dlyh_c55_d250_2' }" @click="handleFilter">查询</BaseButton>
                </el-form-item>
            </el-row>
            <div class="options-wrap">
                <FilterSelect title="AADT" :value.sync="query.aadt" :options="AADTOptions" />
                <FilterSelect title="PCI" :value.sync="query.pci" :options="PCIOptions" />
                <FilterSelect title="RQI" :value.sync="query.rqi" :options="RQIOptions" />
                <FilterSelect title="RDI" :value.sync="query.rdi" :options="RDIOptions" />
                <FilterSelect title="SRI" :value.sync="query.sri" :options="SRIOptions" />
            </div>
        </el-form>
        <!--数据列表区-->
        <BaseTable slot="table" v-loading="listLoading" :columns="columns" :data="list" row-key="id" height="calc(100% - 73px)" highlight-current-row>
            <template #handle="{ scope: { row } }">
                <BaseButton v-permission="{ btnCode: '' }" type="text" @click="handleEdit(row.id)">修改</BaseButton>
            </template>
        </BaseTable>
        <!--分页组件-->
        <Pagination
            slot="pagination"
            :current-page.sync="page.pageNo"
            :page-size.sync="page.pageSize"
            :total="total"
            @current-change="getList"
            @size-change="getList"
        />
        <!-- <SaveOrUpdate ref="dialog"></SaveOrUpdate> -->
    </BasePage>
</template>

<script>
import BasePage from '@/layouts/BasePage'
import ExcelImport from '@/components/ExcelImport'
import { RoadConditionsModel, MaintainDecisionModel } from '@/models'
import KeepAliveHandler from '@/mixins/keepAliveHandler'
import { DirectionOptions } from '@/config/constants'
import FilterSelect from './components/FilterSelect'

export default {
    name: 'MaintenanceRecord',
    components: {
        BasePage,
        ExcelImport,
        FilterSelect
    },
    mixins: [
        KeepAliveHandler({
            defaultCondition: {
                name: ''
            },
            conditionObjKey: 'form'
        })
    ],
    data() {
        return {
            DirectionOptions,
            downloadLoading: false,
            templateLoading: false,
            model: new MaintainDecisionModel(),
            roadConditionsModel: new RoadConditionsModel(),
            form: {
                id: ''
            },
            query: {
                roadType: '',
                aadt: '',
                pci: '',
                rqi: '',
                rdi: '',
                sri: ''
            },
            listLoading: true,
            list: [],
            roadConditionsOptions: [],
            total: 0,
            page: {
                pageNo: 1,
                pageSize: 10
            },
            columns: Object.freeze([
                {
                    attrs: {
                        prop: 'roadType',
                        label: '技术等级',
                        'show-overflow-tooltip': true,
                        'min-width': '150'
                    }
                },
                {
                    attrs: {
                        prop: 'aadt',
                        label: 'AADT',
                        'show-overflow-tooltip': true,
                        width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'pci',
                        label: 'PCI',
                        'show-overflow-tooltip': true,
                        width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'rqi',
                        label: 'RQI',
                        'show-overflow-tooltip': true,
                        width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'rdi',
                        label: 'RDI',
                        'show-overflow-tooltip': true,
                        width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'sri',
                        label: 'SRI',
                        'show-overflow-tooltip': true,
                        width: '120'
                    }
                },
                {
                    attrs: {
                        prop: 'programme1',
                        label: '方案一',
                        'show-overflow-tooltip': true,
                        'min-width': '140'
                    }
                },
                {
                    attrs: {
                        prop: 'programme2',
                        label: '方案二',
                        'show-overflow-tooltip': true,
                        'min-width': '140'
                    }
                },
                {
                    attrs: {
                        prop: 'programme3',
                        label: '方案三',
                        'show-overflow-tooltip': true,
                        'min-width': '140'
                    }
                }
            ]),
            AADTOptions: [],
            PCIOptions: [],
            RQIOptions: [],
            RDIOptions: [],
            SRIOptions: []
        }
    },
    watch: {
        query: {
            handler() {
                this.query.roadType && this.getList()
            },
            deep: true
        }
    },
    async created() {
        await this.getRoadConditionsList()
        console.log(111)
        if (!this.form.id) {
            this.listLoading = false
            return
        }
        await this.getFilterParams()
        this.getList()
    },
    methods: {
        async handleChange() {
            await this.getFilterParams()
            this.getList()
        },
        getRoadConditionsList() {
            return this.roadConditionsModel.getList({}, { pageSize: 10000 }).then((res) => {
                this.roadConditionsOptions = (res.list || []).map((item) => {
                    return {
                        label: item.modelName,
                        value: item.id
                    }
                })
                this.form.id = (this.roadConditionsOptions[0] || {}).value
            })
        },
        getList() {
            this.listLoading = true
            console.log(this.query)
            this.model
                .getList({ ...this.form, ...this.query }, this.page)
                .then((res) => {
                    this.list = res.list || []
                    this.total = res.totalCount
                })
                .finally(() => {
                    this.listLoading = false
                })
        },
        getFilterParams() {
            this.query = {
                roadType: '',
                aadt: '',
                pci: '',
                rqi: '',
                rdi: '',
                sri: ''
            }
            return this.model.getFilterParams({ id: this.form.id }).then((res) => {
                this.query.roadType = res.roadType

                this.AADTOptions = res.aadt.map((item) => {
                    return {
                        label: item.name + ' ' + item.value,
                        value: item.key
                    }
                })
                this.PCIOptions = res.pci.map((item) => {
                    return {
                        label: item.name + ' ' + item.value,
                        value: item.key
                    }
                })
                this.RQIOptions = res.rqi.map((item) => {
                    return {
                        label: item.name + ' ' + item.value,
                        value: item.key
                    }
                })
                this.RDIOptions = res.rdi.map((item) => {
                    return {
                        label: item.name + ' ' + item.value,
                        value: item.key
                    }
                })
                this.SRIOptions = res.sri.map((item) => {
                    return {
                        label: item.name + ' ' + item.value,
                        value: item.key
                    }
                })
            })
        },
        // 查询
        handleFilter() {
            this.page.pageNo = 1
            this.getList()
        }
    }
}
</script>

<style lang="scss" scoped>
.options-wrap {
    max-width: 1180px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}
.filter-stake {
    width: 203px;
    ::v-deep {
        .el-input__inner,
        .el-input {
            min-width: auto !important;
            line-height: 1px !important;
        }
        .el-input-group__append,
        .el-input-group__prepend {
            padding: 0 8px;
            color: #44444f;
        }
    }
    .start-stake {
        position: relative;
        z-index: 1;
        margin-right: -1px;
        ::v-deep {
            .el-input__inner,
            .el-input {
                border-radius: 0;
            }
        }
    }
    .end-stake {
        ::v-deep {
            .el-input-group__append,
            .el-input-group__prepend {
                border-radius: 0;
            }
        }
    }
}
</style>
